{%- extends "apostrophe-modal:base.html" -%}
{%- import "apostrophe-modal:macros.html" as modals -%}
{%- import 'apostrophe-ui:components/buttons.html' as buttons -%}
{%- block modalClass -%}
  apostrophe-polymorphic-chooser-modal apos-ui-modal-no-sidebar apos-manager
{%- endblock -%}

{%- block controls -%}
  {{ buttons.minor('Cancel', { action: 'cancel' }) }}
  {{ buttons.major('Save Choices', { action: 'save' }) }}
{%- endblock -%}

{%- block instructions -%}
  {{ __ns('apostrophe', 'Select the appropriate tab to choose each type of content.') }}
{%- endblock -%}

{%- block filters -%}
  {# Currently not used here #}
{%- endblock -%}

{%- block label -%}
  {{ __ns('apostrophe', 'Choose Documents') }}
{%- endblock -%}

{%- block body -%}
  <div class="apos-chooser" data-chooser></div>
  <div class="apos-chooser-tabs-wrapper apos-polymorphic-manager">
    <div class="apos-chooser-tab-bar">
      {% for type in data.types %}
        <button class="apos-chooser-tab-button{% if loop.index0 === 0 %} apos-chooser-tab-button--active{% endif %}" data-tab-button="{{ type.name }}">{{ type.options.pluralLabel }}</button>
      {% endfor %}
    </div>
    <div class="apos-chooser-tabs">
      {% for type in data.types %}
        <div class="apos-chooser-tab{% if loop.index0 === 0 %} apos-chooser-tab--active{% endif %}" data-tab="{{ type.name }}"></div>
      {% endfor %}
    </div>
  </div>
{%- endblock -%}


{%- block footer -%}
{%- endblock -%}

